<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.wayBillCode"
          placeholder="请输入物流运单号"
        />
      </el-form-item>

      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.orderCode"
          placeholder="请输入物流订单号"
        />
      </el-form-item>

      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.orderNo"
          placeholder="请输入订单号"
        />
      </el-form-item>

      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.customPhone"
          placeholder="请输入手机号"
        />
      </el-form-item>

      <el-form-item>
        <el-select clearable v-model="formData.status" placeholder="请选择状态">
          <el-option
            v-for="item in logisticsStatusList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select clearable v-model="formData.type" placeholder="请选择类型">
          <el-option label="送鞋" value="送鞋"></el-option>
          <el-option label="取鞋" value="取鞋"></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item>
        <el-date-picker
          v-model="formData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="订单开始日期"
          end-placeholder="订单结束日期"
        >
        </el-date-picker>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="cancleTransport">取消物流单号</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column prop="wayBillCode" label="物流运单号" width="160">
      </el-table-column>
      <el-table-column prop="orderCode" label="物流订单号" width="180">
      </el-table-column>

      <el-table-column prop="orderNo" label="订单号" width="180">
      </el-table-column>

      <el-table-column prop="type" label="类型"> </el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ logisticsStatusMap[scope.row.status] }}
        </template>
      </el-table-column>

      <el-table-column prop="sendName" label="寄件人"> </el-table-column>

      <el-table-column prop="sendMobile" label="寄件人电话" width="150">
      </el-table-column>

      <el-table-column prop="sendFullAddress" label="寄件人地址" width="160">
      </el-table-column>

      <el-table-column prop="receiveName" label="收件人"> </el-table-column>

      <el-table-column prop="receiverMobile" label="收件人电话" width="150">
      </el-table-column>

      <el-table-column
        prop="receiverFullAddress"
        label="收件人地址"
        width="160"
      >
      </el-table-column>

      <el-table-column label="价格" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.price.toFixed(2) }} （元）</span>
        </template>
      </el-table-column>

      <el-table-column label="揽收时间" width="180">
        <template slot-scope="scope">
          {{
            formatDateTime(
              Number(scope.row.pickupPromiseTime),
              "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>

      <el-table-column label="预计送达时间" width="180">
        <template slot-scope="scope">
          {{
            formatDateTime(
              Number(scope.row.deliveryPromiseTime),
              "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>

      <el-table-column prop="remark" label="备注"> </el-table-column>

      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="printTransportPdf(scope.row.wayBillCode)"
            :loading="printTransportLoading === scope.row.wayBillCode"
            >打印面单</el-button
          >

          <el-button
            size="small"
            type="primary"
            @click="transportDetail(scope.row.wayBillCode)"
            >轨迹</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />

    <PrintTransport
      ref="printTransport"
      :wayBillCodes="wayBillCodes"
      @success="printTransportLoading = false"
    />

    <el-dialog
      title="物流进度"
      :visible.sync="logisticsLogVisible"
      @close="logisticsLogVisible = false"
      width="50%"
      style="z-index: 2013"
      append-to-body
    >
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in logisticsLogs"
          :key="index"
          :timestamp="log.operationTime"
          icon="el-icon-check"
        >
          {{ log.categoryName }}：{{ log.operationRemark }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>


    
    <el-dialog
        title="提示"
        :visible.sync="showcancleTransport"
         width="960px"
        :before-close="handleClose">
      
       <el-input placeholder="请输入京东快递单号" v-model="transportId" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="showcancleTransport = false">取 消</el-button>
          <el-button type="primary" @click="submitSure">确 定</el-button>
        </span>
</el-dialog>

  </div>
</template>

<script>
import { getTransportList, getTransportDetail , cancelTransport} from "@/api/transport/index";
import { formatDateTime } from "@/utils/formate";
import { logisticsStatusMap, logisticsStatusList } from "@/config/index";
import PrintTransport from "@/components/PrintTransport/PrintTransport.vue";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
export default {
  name: "Index",
  components: {
    PrintTransport,
  },
  data() {
    return {
      transportId:"",
      showcancleTransport:false,
      loading: false,
      printTransportLoading: "",
      queryParams: {
        page: 0,
        pageSize: 10,
        total: 0,
      },
      formData: {
        orderNo: "",
        customPhone: "",
        dateRange: "",
        orderCode: "",
        wayBillCode: "",
        status: "",
        type: "",
      },
      transportPdf: "",
      list: [],
      logisticsStatusMap,
      logisticsStatusList,
      wayBillCodes: [],

      logisticsLogVisible: false,
      logisticsLogs: [],
    };
  },
  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {

    submitSure(){
      if(!this.transportId){
        this.$message.error("京东快递单号为空")
        return
      }
       this.showcancleTransport=false
       cancelTransport({id:this.transportId}).then(res=>{
         this.$message.success("操作成功")
       })
    }, 

    handleClose(){
      this.showcancleTransport=false
    },

    
    
    cancleTransport(){
     this.showcancleTransport=true

    },
    formatDateTime,
    getListData({ page, limit }) {
      this.loading = true;
      const params = {
        ...this.queryParams,

        startTime: this.formData.dateRange
          ? setStartOfDay(this.formData.dateRange[0])
          : "",
        endTime: this.formData.dateRange
          ? setEndOfDay(this.formData.dateRange[1])
          : "",
      };
      getTransportList(params, page || this.queryParams.page + 1, limit)
        .then(({ data }) => {
          this.list = data.records;
          this.queryParams.total = data.total;
          this.queryParams.page = data.current;
          this.queryParams.limit = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    printTransportPdf(wayBillCode) {
      this.printTransportLoading = wayBillCode;
      this.wayBillCodes = [wayBillCode];
    },
    transportDetail(wayBillCode) {
      getTransportDetail(wayBillCode).then((res) => {
        this.logisticsLogVisible = true;
        this.logisticsLogs = res.data.result.data.traceDetails;
      });
    },

    reset() {
      this.formData = {
        orderNo: "",
        customPhone: "",
        dateRange: "",
        orderCode: "",
        status: "",
        wayBillCode: "",
        type: "",
      };
    },

    onSearch() {
      this.queryParams = {
        ...this.queryParams,
        ...this.formData,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
</style>
